<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tst</title>
		<link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
	</head>

	<style type="text/css">
		.s {
			width: 630px;
			margin: 100px auto;
		}
		
		.layui-slider-wrap-btn {
			width: 44px;
			height: 15px;
			line-height: 15px;
			border-radius: 3px;
			background: #1eb2ea;
			display: inline-block;
			vertical-align: top;
			cursor: pointer;
			transform: translateY(50%);
			/* transition: 120000000000000.3s; */
		}
		
		.layui-slider-wrap-btn:hover {
			width: 44px;
			height: 15px;
			line-height: 15px;
			border-radius: 3px;
			background: #1eb2ea;
			display: inline-block;
			vertical-align: top;
			cursor: pointer;
			transform: translateY(50%);
		}
		
		.layui-slider-wrap-btn::after {
			content: '1钻';
			font-size: 14px;
			color: #fff;
		}
		
	</style>
	<body>
		<div class="s">
			<div  id="slideTest5" class="demo-slider"></div>
		</div>
		
		<script src="./layui/layui.all.js" charset="utf-8"></script>
		<script type="text/javascript">
			layui.use('slider', function(){
			  var $ = layui.$
			  ,slider = layui.slider;
			  //默认滑块
			  slider.render({
			    elem: '#slideTest1'
			  });
			  
			  //定义初始值
			  slider.render({
			    elem: '#slideTest2'
			    ,value: 20 //初始值
			  });
			  
			  //设置最大最小值
			  slider.render({
			    elem: '#slideTest3'
			    ,min: 20 //最小值
			    ,max: 50 //最大值
			  });
			  
			  //设置步长
			  slider.render({
			    elem: '#slideTest4'
			    ,step: 10 //步长
			  });
			  
			  slider.render({
			    elem: '#slideTest5'
			    ,step: 1 //步长
			    ,showstep: true,
				max: 12,
				theme: '#179bcd',//开启间隔点
				change: function(value) {
					$(".layui-slider-wrap-btn").empty();
					var content = ['1钻','2钻','3钻','4钻','1冠','2冠','3冠','4冠','1金冠','2金冠','3金冠','4金冠','5金冠']
					var v = $('.layui-slider-wrap-btn').append(
						"<p style='font-size: 14px;color: #fff;'>"+content[value]+"</p>"
					);
				}
			  });
			  
			  
			  
			  
			  
			  
			  //设置提示文本
			  slider.render({
			    elem: '#slideTest6'
			    ,min: 20
			    ,max: 1000
			    ,setTips: function(value){ //自定义提示文本
			     return value + 'GB';
			    }
			  });
			  slider.render({
			    elem: '#slideTest7'
			    ,tips: false //关闭默认提示层
			    ,change: function(value){
			      $('#test-slider-tips1').html('当前数值：'+ value);
			    }
			  });
			  
			  //开启输入框
			  slider.render({
			    elem: '#slideTest8'
			    ,input: true //输入框
			  });
			  
			  //开启范围选择
			  slider.render({
			    elem: '#slideTest9'
			    ,value: 40 //初始值
			    ,range: true //范围选择
			    ,change: function(vals){
			      $('#test-slider-tips2').html('开始值：'+ vals[0] + '、结尾值：'+ vals[1]);
			    }
			  });
			  slider.render({
			    elem: '#slideTest10'
			    ,value: [30, 60] //初始值
			    ,range: true //范围选择
			  });
			  
			  //垂直滑块
			  slider.render({
			    elem: '#slideTest11'
			    ,type: 'vertical' //垂直滑块
			  });
			  slider.render({
			    elem: '#slideTest12'
			    ,value: 30
			    ,type: 'vertical' //垂直滑块
			  });
			  slider.render({
			    elem: '#slideTest13'
			    ,value: 50
			    ,range: true //范围选择
			    ,type: 'vertical' //垂直滑块
			  });
			  slider.render({
			    elem: '#slideTest14'
			    ,value: 80
			    ,input: true //输入框
			    ,type: 'vertical' //垂直滑块
			  });
			  
			  //自定义颜色
			  slider.render({
			    elem: '#slideTest15'
			    ,theme: '#1E9FFF' //主题色
			  });
			  slider.render({
			    elem: '#slideTest16'
			    ,value: 50
			    ,theme: '#5FB878' //主题色
			  });
			  slider.render({
			    elem: '#slideTest17'
			    ,value: [30, 70]
			    ,range: true
			    ,theme: '#FF5722' //主题色
			  });
			  
			  //禁用滑块
			  slider.render({
			    elem: '#slideTest18'
			    ,value: 35
			    ,disabled: true //禁用滑块
			  });
			  
			});
		</script>
	</body>
</html>
